@import '~office-ui-fabric-core/dist/sass/References';
@import './variables';
@import './mixins';

// Root elements
:global {
  html,
  body {
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    background: $ms-color-gray10; // Match header/footer color for browsers with momentum scroll
    background: linear-gradient(to right, $ms-color-white 0%, $ms-color-white 50%, $ms-color-gray10 50%, $ms-color-gray10 100%);
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;

    @include high-contrast {
      // The gradient doesn't behave well in high contrast, so get rid of it.
      background: transparent;
    }
  }

  // Border box everywhere
  html {
    box-sizing: border-box;
  }
  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }

  // Buttons
  button {
    background: transparent;
    border: none;
  }

  // Example card headers
  .ExampleCard-title {
    @include ms-fontSize-20;
    @include ms-fontWeight-semibold;
    @include ms-fontColor-gray130;
  }

  // Implementation table styles
  .PropertiesTable {
    > h2 {
      // Table headers are h2s, but should be styled like h3s
      @include ms-fontSize-20;
      @include ms-fontWeight-semibold;
      @include ms-fontColor-gray130;
      line-height: 1;
    }

    // Table headers and group headers
    .ms-DetailsHeader-cellName, // Table headers
    .ms-GroupHeader-title span {
      // Group headers
      @include ms-fontWeight-semibold;
      @include ms-fontColor-gray160;
    }

    .ms-DetailsHeader-cellName {
      @include ms-fontSize-14;
    }

    .ms-GroupHeader-expand, // Group header collapse icon
    .ms-GroupHeader-title span {
      @include ms-fontSize-16;
    }
  }

  // Feedback section styles
  .FeedbackList-button .ms-Button-label {
    // Feedback button color overridden by UHF
    @include ms-fontColor-white;

    @include high-contrast {
      color: Window;
    }
  }

  // #headerWrapper is the UHF header wrapper. The p, ul, ol style in _typography.scss was making
  // the header links larger than they should be, so reset that here.
  #headerWrapper,
  #footerWrapper,
  #socialMediaContainer {
    p,
    ul,
    ol {
      font-size: inherit;
    }
  }

  // Hide UHF back to top button that attempts to go to a nonexistent #main-content page,
  // and #flightPicker element which creates accessibility issues
  a.m-back-to-top,
  #flightPicker {
    display: none !important;
  }

  @media screen and (min-width: $uhf-screen-min-mobile) {
    // Align logo with left nav
    .c-uhfh > div {
      padding: 0 $App-padding-right-sm 0 $App-padding-left-sm;
    }

    #uhfLogo {
      padding: 16px 6px 16px 0;
      width: 125px;
    }
  }
}
